<template>
  <div class="entityProperty-form">
    <el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
      <el-form-item label="属性名" prop="title">
        <el-input v-model="formData.title" clearable></el-input>
      </el-form-item>

      <el-form-item label="字段名" prop="fieldName">
        <el-input v-model="formData.fieldName" clearable></el-input>
      </el-form-item>

      <el-form-item label="字段类型" prop="fieldType">
        <el-select v-model="formData.fieldType" clearable placeholder="请选择">
          <el-option v-for="item in fieldTypes" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否必填" prop="required">
        <el-switch v-model="formData.required"></el-switch>
      </el-form-item>

      <el-form-item label="默认值" prop="defaultValue">
        <el-input v-model="formData.defaultValue" clearable></el-input>
      </el-form-item>

      <el-form-item label="字段长度" prop="fieldLength">
        <el-input v-model="formData.fieldLength" type="number" clearable></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="formData.description"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formData')">保存</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { FIELD_TYPE, FIELD_TYPE_INT } from "@/constants/BaseSelectItemCode";
export default {
  name: "EntityPropertyForm",
  components: {},
  props: {
    dataId: String,
    dialogFormVisible: Boolean
  },
  data() {
    var checkFieldName = (rule, value, callback) => {
      var regular = /^[a-z_]+$/;
      setTimeout(() => {
        if (regular.test(value)) {
          callback();
        } else {
          callback(new Error("必须全是小写字母"));
        }
      }, 500);
    };
    return {
      fieldTypes: [],
      formData: {
        entityId: null,
        title: null,
        fieldName: null,
        fieldType: FIELD_TYPE_INT,
        required: false,
        defaultValue: null,
        fieldLength: null
      },
      limit: 1,
      rules: {
        title: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
          { max: 10, message: "不能超过 10 个字符", trigger: "blur" }
        ],
        fieldName: [
          { required: true, message: "请填写字段名", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur"
          },
          { validator: checkFieldName, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.handleFormVisible();

    //获取初始化数据
    this.getFormInfo();
  },
  watch: {
    dialogFormVisible(newVal, oldVal) {
      this.handleFormVisible();
    }
  },
  methods: {
    getFormInfo() {
      this.$store.dispatch("baseSelectItem/getByPid", FIELD_TYPE).then(res => {
        this.fieldTypes = res;
      });
    },
    handleFormVisible() {
      //异步更新DOM
      this.$nextTick(() => {
        //清除表单验证
        this.$refs["formData"].clearValidate();
      });
      if (this.dataId == null) {
        this.formData = {
          entityId: null,
          title: null,
          fieldName: null,
          fieldType: FIELD_TYPE_INT,
          required: false,
          defaultValue: null,
          fieldLength: null
        };
        if (this.$route.query && Object.keys(this.$route.query).length > 0) {
          this.formData.entityId = this.$route.query.id;
        }
      } else {
        //异步获取获取详情数据
        this.getDataById(this.dataId);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("entityProperty/createOrUpdate", this.formData)
            .then(res => {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.$emit("handleDialog");
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getDataById(dataId) {
      this.$store
        .dispatch("entityProperty/getById", dataId)
        .then(res => {
          this.formData = res;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

